<template>
	<view>
		
		<uni-file-picker
			:return-type= "returnType"
			fileMediatype="image"
			:mode="mode"
			@select="selectImg"
			@delete="(e)=>{
				
			}"
		></uni-file-picker>

		<!-- #ifdef APP-PLUS -->
<!-- 		<view class="imgs-list" v-if="imgsList.length>0 ? true:false ">
			<view class="imgs-item" v-for="(item,index) in imgsList">
				<image class="img" :src="item" @click="showDetailImg(index)"></image>
				<image class="del-item"  v-if="itemState ? true : false" @click="delImg(index)" src="/static/img/icon_Photo_delete@2x.png"></image>
			</view>
		</view> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import { _uploadFile } from "@/utils/util.js"
export default {
	data() {
		return {
			imgsList:[],
			imgsList_array:[],
			imgsList_string:"",
		};
	},
	props: {
		returnType:{
			type: String,
			default: 'array'
		},
		name:{
			type: String,
			default: ''
		},
		mode:{
			type: String,
			default: 'grid'
		},
		uploadUrl:{
			type: String || null,
			default: null
		},
		form:{
			type: Object,
			default: ()=>{}
		}
	},
	mounted() {

	},
	methods: {
		selectImg(e){
			this.upload(e);
		},
		async upload(e){
			console.log(this.imgsList_string);
			const _data = await _uploadFile(
			`${this.baseUrl}${this.uploadUrl ||  "/fy-warehouseManage/file/uploadFile"}`
			,e.tempFiles[0].path);
			// this.imgsList_string = this.imgsList_string.concat(`${this.imgsList_string == '' ? '' : ','}${_data}`);
			this.imgsList_array.push(_data)
			this.form.setValue(this.name,this.imgsList_array)
			return ;
		},

		// //显示大图
		// showDetailImg(idx) {
		// 	try{
		// 		plus.nativeUI.previewImage(this.imgsList,{
		// 			 current: idx,
		// 		});
		// 	}catch(e){
		// 		this.$refs.swiperDetailImg.hideDetail(true);
		// 		this.current = idx;
		// 	}
		// },
		// //删除文件大图
		// delImg(idx) {
		// 	this.imgsList.splice(idx, 1);
		// 	this.fileList.splice(idx, 1);
		// },
		
		
	}
};
</script>

<style lang="scss">
	.imgs-list {
		flex: 1;
		width: 100%;
		// margin: 0 auto;
		padding: 20upx 0;
		border-bottom: 1rpx solid #e6e6e6;
		.imgs-item {
			flex:1;
			width: 33.3%;
			height: 200upx;
			display: inline-block;
			position: relative;

			.img {
				position: absolute;
				width: 95%;
				height: 95%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%)
			}

			.del-item {
				width: 45upx;
				height: 45upx;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}

</style>
